<template>
  <div>
    <div id="mains">
    </div>
  </div>

</template>

<script>

  export default{
    props:['datad'],
    data(){
      return{
        tabledata:[],
        tabledataya:[],//x轴参数
        tabledatayc:[],//y轴参数
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading()
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datad;
        let ag=that.tabledata;
        console.log(that.tabledata)
        that.tabledataya=[];//这是y轴数据,例:“22：00”
        that.tabledatayc=[];//这是x轴显示百分比的地方,例:10%

        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].yb)//这是y轴数据
          if(ag[i].ya=='0'){
            ag[i].ya='-'
          }
          that.tabledatayc.push(ag[i].ya)//这是X轴显示百分比的地方
        }

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){

         // 基于准备好的dom，初始化echarts实例,采用svg渲染
         var myChart = this.$echarts.init(document.getElementById('mains'),null, {renderer: 'svg'});

         // 绘制图表
         var data = this.tabledatayc;


         //markPoint-------根据data值决定标注位置
         var markdata=[];//用于标注的值
         for(var i=0;i<data.length;i++){
           var markdatals={
             xAxis:"", yAxis:""
           }
           if(data[i]!='-'){
             console.log(i)
              markdatals.xAxis=i;
              markdatals.yAxis=data[i]/2;
              markdata.push(markdatals);
           }
         }
         // -------结束

         var option = {
             calculable:false,
             grid: {
               left: this.remToPx(0.3),
               top: '12%',
               right: this.remToPx(0.6),
               bottom: '8%',
               containLabel: true,

              },
             backgroundColor: '#0f2e6f',
             xAxis: {
                 type: 'category',
                 data: this.tabledataya,
                 axisLabel: {
                     textStyle: {
                       color:'#5c79b5',
                       fontSize:this.remToPx(0.28),
                     },
                     margin:this.remToPx(0.15),
                 },
                 axisLine:{
                   lineStyle:{
                     color:"#000000",
                   }
                 },
                 axisTick:{
                   alignWithLabel :true,
                 },
                 triggerEvent:false,
             },
             yAxis: {
                 show:true,
                 type:'value',
                 position :'right',
                 offset:this.remToPx(0.2),//偏移量
                 axisLine :{
                   show:false,
                   lineStyle:{
                     color:'#6b84b0',
                   },

                 },
                 splitLine:{//是否现实y轴分割线
                   show:false,
                 },
                 axisLabel:{
                   margin :this.remToPx(0.3),
                 },
                 triggerEvent:false,
             },
             series: [
                {
                 data:data,
                 type: 'bar',
                 barWidth: this.remToPx(0.04),
                 itemStyle: {
                     normal: {
                         color:"#4676c8",
                     }
                 },
                 markPoint:{
                   symbol:'circle',
                   symbolSize:this.remToPx(0.3),
                   data :markdata,
                   itemStyle :{
                     opacity:0.5,
                   }
                 }
             },
             {
               symbolSize:this.remToPx(0.38),//如果数据为0，采用“-”代替’0‘
               data:data,
               progressive:400,
               name: '透明标记',
               type: 'scatter',
               symbol:"circle",
               hoverAnimation:false,
               itemStyle:{
                 opacity:9,
                 color:"#ffffff",
               }
             },
             // 散点
             {
               symbolSize:this.remToPx(0.4),//如果数据为0，采用“-”代替’0‘
               data:data,
               progressive:400,
               name: '透明标记',
               type: 'scatter',
               hoverAnimation:false,
               symbol:"path://M38.634 2.586 C 19.912 7.118,4.700 23.800,1.717 43.072 C -3.318 75.602,25.398 104.318,57.928 99.283 C 78.844 96.045,96.034 78.915,99.256 58.099 C 104.612 23.498,72.757 -5.673,38.634 2.586 Z,M55.685 35.064 C 59.675 36.571,63.767 40.765,65.054 44.665 L 66.155 48.000 81.078 48.000 L 96.000 48.000 96.000 50.500 L 96.000 53.000 81.013 53.000 L 66.027 53.000 64.649 56.297 C 59.380 68.909,40.620 68.909,35.351 56.297 L 33.973 53.000 18.987 53.000 L 4.000 53.000 4.000 50.500 L 4.000 48.000 18.922 48.000 L 33.845 48.000 34.946 44.665 C 37.646 36.482,47.440 31.948,55.685 35.064 Z",
               itemStyle:{
                 opacity:9,
                 color:"#456ddd",
               }
             },


             ]
         };

         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
      }
    }
  }
</script>

<style>
  body{
      -webkit-user-select:none;
      -moz-user-select:none;
      -ms-user-select:none;
      user-select:none;
   }
  #mains{
    width:100%;height:2.66rem;float:left;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
